<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>在线考试系统后台登录页面</title>
<link rel="icon" href="favicon.ico" type="image/ico">

<link rel="stylesheet" th:href="@{/static/css/login_style.css}">
<link rel="stylesheet" th:href="@{/static/css/popuo-box.css}">
<link rel="stylesheet" th:href="@{/static/css/circle.css}">

<style>
input#username, input#password {
  font-size:17px;
}
#box h1{
  margin-top: 40px;
  margin-bottom: 15px;
}
</style>

</head>
<body>

<div class="circle_demo">
  <div>
    <div id="large-header" class="large-header">
       <canvas id="demo-canvas"></canvas>
    </div>
  </div>
</div>
<script th:src="@{/static/js/login/circle-demo.js}"></script>

<div id="box">
  <h1>在线考试系统登录页</h1>

  <div class="container">
    <h2>Login here</h2>
    <form action="#" method="post">
      <input type="email" name="username" id="username"
             placeholder="USERNAME" required />
      <input type="password" name="password" id="password"
             placeholder="PASSWORD" required />
      <ul class="agileinfotickwthree">
        <li>
          <input type="checkbox" id="brand1" value="">
          <label for="brand1"><span></span>Remember me</label>
          <a href="#">忘记密码 ?</a>
        </li>
      </ul>
      <div class="aitssendbuttonw3ls">
        <input type="button" id="submit" value="用户登录"
               onclick="doLogin();" />
        <p>
          点击创建新的帐号 <span>→</span>
          <a class="w3_play_icon1" href="#small-dialog1">
          点击这里!
          </a>
        </p>
        <div class="clear"></div>
      </div>
    </form>
  </div>

  <!-- 2. 注册表单 [ START ] -->
  <div id="small-dialog1" class="mfp-hide">
    <div class="contact-form1">
      <div class="contact-w3-agileits">
        <h3>注册表单</h3>
        <form action="#" method="post">
          <div class="form-sub-w3ls">
            <input placeholder="User Name"  type="text" required>
            <div class="icon-agile">
              <i class="fa fa-user" aria-hidden="true"></i>
            </div>
          </div>
          <div class="form-sub-w3ls">
            <input placeholder="username" class="username"
                   type="text" required onFocus="doPlay();" />
            <div class="icon-agile">
              <i class="fa fa-envelope-o" aria-hidden="true"></i>
            </div>
          </div>
          <div class="form-sub-w3ls">
            <input placeholder="password" type="password" required />
            <div class="icon-agile">
              <i class="fa fa-unlock-alt" aria-hidden="true"></i>
            </div>
          </div>
          <div class="form-sub-w3ls">
            <input placeholder="Confirm Password"  type="password" required>
            <div class="icon-agile">
              <i class="fa fa-unlock-alt" aria-hidden="true"></i>
            </div>
          </div>
          <div class="login-check">
            <label class="checkbox"><input type="checkbox" name="checkbox"/>
              我接受这些款项与条件。
            </label>
          </div>
          <div class="submit-w3l">
            <input type="submit" value="Register">
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- 2. 注册表单 [ END ] -->

  <div class="footer">
      <p> &copy; 2020 Existing Login Form. All Rights Reserved | Design by
      <a style="color:#007bff;">ALECTER_LIAO</a>
      </p>
  </div>

</div>

<script th:src="@{/static/js/jquery-2.1.4.min.js}"></script>
<script th:src="@{/static/js/jquery.magnific-popup.js}"></script>

<script>
    $( document ).ready( function() {
        $('.w3_play_icon,.w3_play_icon1,.w3_play_icon2')
            .magnificPopup({
            type: 'inline',
            fixedContentPos: false,
            fixedBgPos: true,
            overflowY: 'auto',
            closeBtnInside: true,
            preloader: false,
            midClick: true,
            removalDelay: 300,
            mainClass: 'my-mfp-zoom-in'
        });
    });

    /*----------------------------[背景音乐]-----------------------------*/
    var player;
    window.onload = function(){
        player = document.getElementById('player');
        setTimeout( function () {
            player.play();
        }, 1000 );
    }
    function doPlay(){
        //player.muted = false;
        player.play();
    }
</script>

<audio
  id="player" preload autoplay>
  <source th:src="@{/static/assets/bgmusic01.mp3}"
          type="audio/mpeg">
  浏览器不支持
</audio>

<script>
    function doLogin(){
        //获取用户名和密码
        let username = $("#username").val();
        let password = $("#password").val();
        //发送ajax，返回的结果  数据类型为 json格式
        $.ajax({
            url:"/ExamAPP/doLogin",
            type:"POST",
            data:{"username":username,"password":password},
            success:function( resp ){
                if( resp.result=="success" ){
                    window.location = "/ExamAPP/index";
                }else{
                    var msg = "系统错误。";
                    if( resp.cause ){
                        msg = resp.cause;
                    }
                    alert("{用户认证}用户登录失败, 原因: "+ msg );
                }
            },
            error:function( resp ){
                alert("{系统错误} 用户登录失败." );
            }
        });
    }
</script>
</body>
</html>
